
  var CityPicker = function(el, options) {
    this.el = $(el);
    this.options = options;
    this.provinces = provinces;
    this.pro = null;
    this.city = null;
    this.elType = this.el.is('button');

    this.init();
  };

  var p = CityPicker.prototype;

  p.init = function() {
    this.initEvent();
    this.preventPopKeyboard();

  };

  p.preventPopKeyboard = function() {
    if (this.elType) {
      this.el.prop("readonly", true);
    }
  };

  p.initEvent = function() {
    this.el.on("click", function(e) {
      var pickerBox = $(".picker-box");
      if (pickerBox[0]) {
        pickerBox.fadeIn();
        $("#name").blur();
      } else {
        this.create();
      }
    $('html').addClass('active');
    remove();
    }.bind(this));
  };

  p.create = function() {
    this.createCityPickerBox();
    this.createProList();
    this.proClick();
    this.cityClick();
    this.createNavBar();
    this.navEvent();
  };

  p.createCityPickerBox = function() {
    var proBox = "<div class='picker-box'></div>";
    $("body").append(proBox);
    $(".picker-box").fadeIn();
    $("#name").blur();
  };

  p.createProList = function() {
    var provinces = this.provinces;
    var proBox;
    var dl = "";
    for (var letterKey in provinces) {
      var val = provinces[letterKey];
      if (provinces.hasOwnProperty(letterKey)) {
        var dt = "<dt id='" + letterKey + "'>" + letterKey + "</dt>";
        var dd = "";
        for (let i = 0; i < val.length; i++) {
			if(val[i]['company_name']){
				dd += "<dd mid='"+val[i]['id']+"' data-letter=" + letterKey + ">" + val[i]['username'] + "【" + val[i]['company_name'] + "】</dd>";
			}else{
				dd += "<dd mid='"+val[i]['id']+"' data-letter=" + letterKey + ">" + val[i]['username'] + "</dd>";
			}
        }
        dl += "<dl>" + dt + dd + "</dl>";
      }
    }

    proBox += "<div class='picker_tit'><a class='back_btn' href='javascript:;'></a>选择客户<a class='add_btn' href='javascript:;'></a></div><section class='pro-picker'><div class='search_cont animate'><div class='search_inp'><input type='input' placeholder='输入客户名查询……'><span class='animate'>取消</span></div></div><div class='search_result'></div><div class='search_li'><ul></ul><p>无对应数据</p></div>" + dl + "</section>";

    $(".picker-box").append(proBox);
    $('.pro-picker dd').each(function(){
      var txt = $(this).text();
          mid = $(this).attr('mid');
      $('.search_li ul').append("<li mid='"+mid+"'>"+txt+"</li>")
    })
  };

  p.createCityList = function(letter, pro) {
    var cities = this.provinces[letter][pro];
    var ul, li = "";
    cities.forEach(function(city, i) {
      li += "<li>" + city + "</li>";
    });

    ul = "<ul class='city-picker'>" + li + "</ul>";
    $(".picker-box").find(".city-picker").remove().end().append(ul);

    this.cityClick();
  };

  p.proClick = function() {
    var that = this;
    $(".pro-picker").on("click", function(e) {
      var target = e.target;
      if ($(target).is("dd")) {
        that.pro = $(target).html();
        var letter = $(target).data("letter"),
            mid = $(target).attr('mid');
        //that.createCityList(letter, that.pro);
        that.el.val(that.pro);
        $('#name').change();
        $(".picker-box").fadeOut();
        //$(".pro-picker").show();
        //$(this).hide();
        $('#name').attr('mid',mid);
        $('html,.search_cont').removeClass('active');
        bg_che();
      }
    });
    var sear_r = $('.search_result'),
        sear_in = $(".search_cont").find('input'),
        sear_sp = $(".search_cont").find('span'),
        sear_ul = $(".search_li");
    $('body').on("click",".picker-box .back_btn",function(e) {
      $(".picker-box,.search_inp span").fadeOut();
      $('html,.search_cont').removeClass('active');
      $('.search_inp input').val('');
      $('.search_result,.search_li').hide();
    });
    sear_in.on("focus", function() {
      sear_r.fadeIn();
    });
    sear_sp.on("click", function() {;
      sear_in.val('');
      $(this).hide();
      $('.search_cont,.search_result').removeClass('active');
      $('.search_li li').removeClass('active');
      sear_ul.hide();
      sear_r.hide();
      $('.pro-picker').css('overflow-y','auto');
    });
    sear_r.on("click", function() {
      sear_r.fadeOut();
      sear_ul.fadeOut();
      $('.pro-picker').css('overflow-y','auto');
    });
    sear_in.on('propertychange input', function () {
      var keyWord = $(this).val(),
          sli = $('.search_li li');
          len = sli.length,
          arr = [];
      sli.removeClass('active');
      if(keyWord!=''){
        $('.search_cont,.search_result').addClass('active');
        sear_sp.show();
        sear_ul.fadeIn();
        $('.pro-picker').css('overflow','hidden');
        for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          var lt = sli.eq(i).html();
          if(lt.indexOf(keyWord)>=0){
            sli.eq(i).addClass('active');
            if($('.search_li').find('.active').length!=0){
                $('.search_li p').hide();
            }
          }else{
            if($('.search_li').find('.active').length==0){
          $('.search_li p').show();
        }
          }
        }
        return arr;
      }else{
        $('.search_cont,.search_result').removeClass('active');
        sear_sp.hide();
        sear_ul.fadeOut();
        sear_r.on("click", function() {
          sear_r.fadeOut();
        });
      }
    })
  };

  p.cityClick = function() {
    var that = this;
    $(".search_li").on("click", function(e) {
      var target = e.target;
      if ($(target).is("li")) {
        that.city = $(target).html();
        that.mid = $(target).attr('mid');
        that.el.val(that.city);
        that.el.attr('mid',that.mid);
        $('#name').change();
        $(".picker-box").fadeOut();
        $('.search_li').hide();
        $('.search_result,.search_inp span').hide();
        $('.search_inp input').val('');
        $('html,.search_cont,.search_result').removeClass('active');
        bg_che();
        $('.pro-picker').css('overflow-y','auto');

      }
    });
  };

  p.createNavBar = function() {
    var a = "";
    for(var i in provinces){
      a += '<a href="#' + i + '">' + i + '</a>';
    }

    var div = '<div class="navbar">' + a + '</div>';

    $(".pro-picker").append(div);
  };

  p.navEvent = function() {
    var that = this;
    var navBar = $(".navbar");
    var width = navBar.find("a").width();
    var height = navBar.find("a").height();
    navBar.on("touchstart", function(e) {
      $(this).addClass("active");
      that.createLetterPrompt($(e.target).html());
      that.changeLetter($(e.target).html());
      console.log($(e.target).html());
    });

    navBar.on("touchmove", function(e) {
      e.preventDefault();
      var touch = e.originalEvent.touches[0];
      var pos = {"x": touch.pageX, "y": touch.pageY};
      var x = pos.x, y = pos.y;
      $(this).find("a").each(function(i, item) {
        var offset = $(item).offset();
        var left = offset.left, top = offset.top;
        if (x > left && x < (left + width) && y > top && y < (top + height)) {
          location.href = item.href;
          that.changeLetter($(item).html());
          console.log($(item).html());
        }
      });
    });

    navBar.on("touchend", function() {
      $(this).removeClass("active");
      $(".prompt").hide();
    })
  };

  p.createLetterPrompt = function(letter) {
    var prompt = $(".prompt");
    if (prompt[0]) {
      prompt.show();
    } else {
      var span = "<span class='prompt'>" + letter + "</span>";
      $(".picker-box").append(span);
    }
  };


  p.changeLetter = function(letter) {
    var prompt = $(".prompt");
    prompt.html(letter);
  };
  $.fn.CityPicker = function(options) {
    return new CityPicker(this, options);
  }
